<template>
	<view class="boxs">
		<view class="emptys"></view>
		<view class="conts">
			<view>
				<view class="info">
					<image :src="require('@/managePackage/image/logo.png')"></image>
					<view>
						<view>渝渔速专人配送</view>
						<view>{{orderInfo.sn}}</view>
					</view>
				</view>
				<view class="process">
					<view :class="{'actives': index === 0}" v-for="(item, index) in orderInfo.logistics_list" :key="index">
						<image :src="require('@/managePackage/image/process_now.png')" v-if="index === 0"></image>
						<image :src="require('@/managePackage/image/process.png')" v-else></image>
						<view>
							<view>{{item.show_time}}</view>
							<view>{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderInfo: {
				logistics_list: []
			}
		}
	},
	created() {
		this.orderInfo = JSON.parse(uni.getStorageSync('logistics'))
	}
}
</script>

<style scoped lang="scss">
.process {
	box-sizing: border-box;
	padding: 0 0 20upx 0;
	margin-top: 48upx;
	>view {
		display: flex;
		position: relative;
		box-sizing: border-box;
		padding-bottom: 70upx;
		>image {
			width: 30upx;
			height: 30upx;
			flex-shrink: 0;
			position: relative;
			margin-right: 19upx;
			z-index: 3;
		}
		>view {
			margin-top: 4upx;
			>view:nth-of-type(1) {
				font-size: 24upx;
				color: #666666;
			}
			>view:nth-of-type(2) {
				font-size: 26upx;
				color: #666666;
				line-height: 48upx;
				margin-top: 20upx;
			}
		}
	}
	>view:not(:last-child)::after {
		content: '';
		position: absolute;
		width: 1px;
		height: calc(100% - 30upx);
		z-index: 2;
		left: 14.5upx;
		top: 30upx;
		background-color: #D2D2D2;
	}
	.actives {
		view {
			color: #ED1B3D !important;
		}
	}
}
.emptys {
	height: 90upx;
	background-color: #0B59E0;
	z-index: 2;
}
.boxs {
	min-height: 100vh;
	background-color: #F6F6F6;
}
.conts {
	width: 100%;
	box-sizing: border-box;
	padding: 0 20upx;
	>view {
		background-color: #fff;
		border-radius: 20upx;
		margin-top: -30upx;
		z-index: 10;
		box-sizing: border-box;
		padding: 0 33upx;
		.info {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 43upx 0;
			border-bottom: 1px solid #F6F6F6;
			>image {
				width: 88upx;
				height: 88upx;
				margin-right: 28upx;
			}
			>view {
				>view:nth-of-type(1) {
					font-size: 28upx;
					color: #000000;
				}
				>view:nth-of-type(2) {
					font-size: 29upx;
					color: #000000;
					margin-top: 20upx;
				}
			}
		}
	}
}
</style>